<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读成长树</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <!-- 顶部信息栏 -->
        <header class="game-header">
            <div class="stats">
                <span id="timer">00:00:00</span>
                <span id="streak">🔥 连续打卡: 0天</span>
            </div>
            <div class="header-buttons">
                <button id="history-btn">📁</button>
                <button id="settings-btn">⚙️</button>
            </div>
        </header>

        <!-- 主游戏区 -->
        <main class="game-main">
            <div class="tree-container">
                <img id="tree-image" src="assets/tree-stages/seed.png" alt="成长树">
                <div id="particles-container"></div>
            </div>
            <div class="progress-container">
                <div class="progress-bar">
                    <div id="progress-fill"></div>
                </div>
                <span id="progress-text">0%</span>
            </div>
        </main>

        <!-- 控制区 -->
        <div class="controls">
            <button id="start-btn" class="btn-primary">开始朗读</button>
            <div class="volume-indicator">
                <div id="volume-bar"></div>
                <span>音量: <span id="volume-value">0</span>dB</span>
            </div>
        </div>

        <!-- 成就弹窗 -->
        <div id="achievement-popup" class="popup hidden">
            <div class="popup-content">
                <img src="assets/icons/achievement.png" class="achievement-icon">
                <h3>成就解锁!</h3>
                <p id="achievement-desc">首次朗读超过5分钟</p>
                <button class="btn-close">✓</button>
            </div>
        </div>

        <!-- 设置面板 -->
        <div id="settings-panel" class="panel hidden">
            <h3>游戏设置</h3>
            <div class="setting-item">
                <label for="volume-threshold">音量阈值 (dB):</label>
                <input type="range" id="volume-threshold" min="30" max="70" value="50">
                <span id="threshold-value">50</span>
            </div>
            <div class="setting-item">
                <label for="daily-goal">每日目标 (分钟):</label>
                <input type="number" id="daily-goal" min="10" max="120" value="30">
            </div>
            <div class="setting-item">
                <label>录音设置:</label>
                <div class="toggle-switch">
                    <input type="checkbox" id="auto-record" checked>
                    <label for="auto-record">自动保存录音</label>
                </div>
            </div>
            <button id="save-settings" class="btn-primary">保存</button>
        </div>

        <!-- 历史记录面板 -->
        <div id="history-panel" class="panel hidden">
            <div class="panel-header">
                <h3>朗读历史</h3>
                <button class="btn-close-panel">×</button>
            </div>
            <div class="history-controls">
                <select id="history-filter">
                    <option value="all">全部记录</option>
                    <option value="today">今天</option>
                    <option value="week">本周</option>
                    <option value="month">本月</option>
                </select>
                <button id="delete-all-btn" class="btn-danger">清空历史</button>
            </div>
            <div id="history-list" class="history-list">
                <!-- 动态生成历史记录 -->
            </div>
            <audio id="audio-player" controls class="hidden"></audio>
        </div>

        <!-- 录音确认弹窗 -->
        <div id="recording-popup" class="popup hidden">
            <div class="popup-content">
                <h3>录音已完成</h3>
                <p>本次朗读时长: <span id="recording-duration">00:00:00</span></p>
                <div class="recording-actions">
                    <button id="save-recording" class="btn-primary">保存</button>
                    <button id="discard-recording" class="btn-secondary">丢弃</button>
                    <button id="play-recording" class="btn-secondary">试听</button>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>